<template>
	<view style="background-color:#f5f5f5">
		<view style="background-color: white;border-bottom: 1px solid white;padding-top: 20rpx;" class="step">
			<up-steps :current="current" activeColor='green'>
				<up-steps-item title="分配中"></up-steps-item>
				<up-steps-item title="接单中"></up-steps-item>
				<up-steps-item title="备货中"></up-steps-item>
				<up-steps-item title="发货中"></up-steps-item>
				<up-steps-item title="回款|签收"></up-steps-item>
				<up-steps-item title="完结"></up-steps-item>
			</up-steps>
		</view>
		<!-- 	<up-line color="#f5f5f5"></up-line> -->
		<u-gap height="5" bgColor="#cccccc"></u-gap>
		<view class="form">
			<view style="background-color: white;padding: 0rpx;">
				<up-tabs @click="tabsClick" :list="titleList" lineWidth="60" :current="currentTab" lineColor="red"
					:activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#9ca0a6',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</up-tabs>
			</view>
			<up-line color="#55aa00" style="margin-bottom: 20rpx;"></up-line>
			<view class="viewData" v-show="currentTab == 0">
				<up-form labelPosition="left" class="apply-form-field" :labelStyle="labelStyle" :borderBottom="false"
					:model="orderInfo">
					<up-form-item borderBottom="false" label-width="160" label="订单号">
						<up-input v-model="orderInfo.orderSum" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="下单日期">
						<up-input v-model="orderInfo.orderDate" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="客户名称">
						<up-input v-model="orderInfo.customerName" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="付款账期">
						<up-input v-model="orderInfo.accountPeriod" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="发货方式">
						<up-input v-model="orderInfo.choiceCar" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="发货日期">
						<up-input v-model="orderInfo.pickDate" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="销售部门">
						<up-input v-model="orderInfo.department" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="销售类型">
						<up-input v-model="orderInfo.sample" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="所在区域">
						<up-input v-model="orderInfo.area" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="销售人员">
						<up-input v-model="orderInfo.salesPerson" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="跟单员">
						<up-input v-model="orderInfo.gendanyuan" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="是否押车">
						<up-input border="none" readonly>
							<template #prefix>
								{{orderInfo.isUnloading == 0 ?'否':'是'}}
							</template>
						</up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="押车天数" v-if="orderInfo.isUnloading == 1">
						<up-input v-model="orderInfo.unloadingDays" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="预计押车费用"
						v-if="orderInfo.isUnloading == 1">
						<up-input v-model="orderInfo.unloadingFare" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="收货人">
						<up-input v-model="orderInfo.customerTake" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="收货人电话">
						<up-input v-model="orderInfo.customerPhone" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="收货人地址">
						<up-input border="none" readonly>
							<template #prefix>
								{{orderInfo.textProvince+'/'+orderInfo.textCity+'/'+orderInfo.textArea}}
							</template>
						</up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="收货人详细地址">
						<up-input v-model="orderInfo.customerAddress" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="客户形式">
						<up-input v-model="orderInfo.customerForm" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="付款方式">
						<up-input v-model="orderInfo.customerPay" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="付款账号">
						<up-input v-model="orderInfo.customerAccount" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="是否开票">
						<up-input border="none" readonly>
							<template #prefix>
								{{orderInfo.isInvoicing == 0 ?'否':'是'}}
							</template>
						</up-input>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="相关图片">
						<u-upload :fileList="fileList1" name="1" multiple :maxCount="10" disabled
							v-if="this.fileList1.length>0"></u-upload>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="相关文件">
						<u-upload :fileList="fileList2" name="1" multiple :maxCount="10" disabled
							v-if="this.fileList2.length>0"></u-upload>
					</up-form-item>
					<up-form-item borderBottom="false" label-width="160" label="备注">
						<div>{{orderInfo.remake}}</div>
					</up-form-item>
					<up-loadmore loadmoreText="看,我是有底线的哟" color="green" lineColor="green" dashed line />
				</up-form>
				
			</view>
			<view class="viewData" v-show="currentTab == 1">
				<!-- <up-empty height="750"></up-empty> -->
				<view style="padding: 0rpx 5rpx 0rpx 5rpx;">
					<wuLiuDetail  :data="id"></wuLiuDetail>
				</view>
			</view>
			<view class="viewData" v-show="currentTab == 2">
				<view style="padding: 0rpx 5rpx 0rpx 5rpx;">
					<swiper :indicator-dots="true" class="swiper1" @change="swiper1Change($event)" >
						<swiper-item v-for="(item,index) in sellOrderInfo" :key="index">
							<up-form labelPosition="left" class="apply-form-field" :labelStyle="labelStyle"
								:borderBottom="false" :model="orderInfo">
								<up-form-item borderBottom="false" label-width="160" label="序号">
									<up-input border="none" readonly>
										<template #prefix>
											<div style="color: red;">{{(index+1)+'/共'+sellOrderInfo.length+'单'}}</div>
										</template>	
									</up-input>	
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="跟单员">
									<up-input border="none" readonly>
										<template #prefix>
											<span v-if="!item.gendanyuan || item.gendanyuan == ''">暂无</span>
											<span v-else>{{ (item.gendanyuan.split(","))[item.gendanyuan.split(",").length - 1]
					                      }}</span>
										</template>
									</up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="SKU名称">
									<up-input v-model="item.skuName" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="外包装">
									<up-input v-model="item.packageMethod" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="内包装">
									<up-input v-model="item.innerPackageMethod" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="产品名称">
									<up-input v-model="item.productName" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="品种">
									<up-input border="none" readonly>
										<template #prefix>
											<template v-for="(item1, index) in item.varietySplits" :key="index">
												{{ item1+"、" }}
											</template>
										</template>
									</up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="等级">
									<up-input v-model="item.grade" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="最小规格/kg">
									<up-input v-model="item.minimum" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="内包装数量/箱">
									<up-input v-model="item.weight" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="外包装订单数量">
									<up-input v-model="item.piece" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="单价(最小规格/元)">
									<up-input v-model="item.price" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="订单金额/元">
									<up-input v-model="item.priceTotal" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="采购重量">
									<up-input v-model="item.weightTotal" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="销售单价/公斤/元">
									<up-input v-model="item.desc" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="出库类型">
									<up-input v-model="item.type" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="是否分级">
									<up-input v-model="item.isGraded" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="是否标重">
									<up-input v-model="item.isStandardWeight" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="关联订单">
									<up-input v-model="item.relatedOrderNum" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="新旧货">
									<up-input v-model="item.extent" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="打托方式(箱/托)">
									<up-input v-model="item.palletizingMethod" border="none" readonly></up-input>
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="指定园区">
									<div>{{item.companyName}}</div>
									<!-- <up-input v-model="item.companyName" border="none" readonly></up-input> -->
								</up-form-item>
								<up-form-item borderBottom="false" label-width="160" label="备注">
									<div>{{item.notes}}</div>
									<!-- <up-input v-model="item.notes" border="none" readonly type="textarea"></up-input> -->
								</up-form-item>
								<view style="text-align: center;margin-top: 10rpx;">
									<up-tag :text="currentSellPage + '/'+sellOrderInfo.length" plain size="mini"></up-tag>
								</view>
								<up-loadmore loadmoreText="可左右滑动查看销售订单" color="red" lineColor="red" line />
							</up-form>
						</swiper-item>
					</swiper>
				</view>	
			
			</view>
			<view class="viewData" v-show="currentTab == 3">
				<view style="padding: 0rpx 5rpx 0rpx 5rpx;">
					<purchaseDetail ref="purchaseRef" :belongList="sellOrderInfo" :info="orderInfo" :date="orderInfo.orderDate" v-if="sellOrderInfo.length>0"></purchaseDetail>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import orderApi from '@/apis/gyl/order.js';
	import baseApi from '@/apis/gyl/base.js';
	import wuliuApi from '@/apis/gyl/wuliu.js';
	import wuLiuDetail from '@/components/order/wuliuDetail.vue';
	import purchaseDetail from '@/components/order/purchaseDetail.vue';
	export default {
		components: {
			wuLiuDetail,
			purchaseDetail
		},
		data() {
			return {
				type: 1, //1详情 2物流
				sourceCarryList: [],
				current: 0,
				driverDateShow: false,
				labelStyle: {
					color: '#aaa',
					fontSize: '30rpx'
				},
				column: [{
						name: 'skuName',
						label: 'SKU名称',
						width: 140
					},
					{
						name: 'm_name',
						label: '产品名称',
					},
					{
						name: 'm_desc',
						label: '等级',
					},
					{
						name: 'packing',
						label: '包装方式',
					},
					{
						name: 'piece',
						label: '实际发货数量',
						width: 120
					},
					{
						name: 'num',
						label: '实际发货重量',
						width: 120
					}
				],
				stockList: [],
				faHuoList: [],
				currentSellPage: 1,
				currentSalePage: 1,
				currentStockPage: 1,
				currentFaHuoPage: 1,
				currentTab: 0,
				list: [{
						key: 'plus',
						name: 'plus',
						color: '#fff',
						backgroundColor: 'red'
					},
					{
						key: 'order',
						name: 'order',
						color: '#fff',
						backgroundColor: 'green'
					}
				],
				orderInfo: {}, //客户信息
				sellOrderInfo: [], //销售订单
				saleOrderInfo: [], //采购订单
				id: null, //订单id
				status: null,
				fileList1: [],
				fileList2: [],
				sourceTitleList: [{
						name: '客户信息',
						badge: {
							value: 0
						},
					},
					{
						name: "物流信息",
						badge: {
							value: 0
						},
					},
					{
						name: '销售订单',
						badge: {
							value: 0
						},
					},
					{
						name: '采购订单',
						badge: {
							value: 0
						},
					},
					{
						name: '备货单',
						badge: {
							value: 0
						},
					},
					{
						name: '发货记录',
						badge: {
							value: 0
						},
					},
				],
				titleList: [],
				title1List: ['客户信息', '物流', '销售订单', '采购订单', '备货单', '发货记录'],
			}
		},
		
		onNavigationBarButtonTap() {
		   this.$refs.purchaseRef.purchaseSave();
		},
		
		methods: {
			swiper1Change(item) {
				this.currentSellPage = item.detail.current + 1;
			},
			swiper2Change(item) {
				this.currentSalePage = item.detail.current + 1;
			},
			tabsClick(item) {
				this.currentTab = item.index;
				this.currentSellPage = 1;
				this.currentSalePage = 1;
			},
			async getDetail() {
				const res = await orderApi.getDetail({
					id: this.id,
					status: this.status
				})
				if (res.success) {
					this.orderInfo = res.data.sellDetail;
					this.sellOrderInfo = this.orderInfo.belongList;
					if (this.orderInfo.orderImage != null && this.orderInfo.orderImage != '') {
						var img = this.orderInfo.orderImage.split(',')
						img.forEach((item) => {
							const map = {
								url: item
							}
							this.fileList1.push(map)
						})
					}
					if (this.orderInfo.orderText != null && this.orderInfo.orderText != '') {
						var signImg = this.orderInfo.orderText.split(',')
						img.forEach((item) => {
							const map = {
								url: item
							}
							this.fileList2.push(map)
						})
					}
					this.titleList[2].badge.value = this.sellOrderInfo.length;
					//采购订单

				}
			},
		},

		onLoad(option) {
			this.id = option.id;
			this.status = option.status;
			this.titleList = this.sourceTitleList.slice(0, 4);
			this.type = option.type;
            this.currentTab = 3;
			this.getDetail();
			// this.getWUliu();
			// this.getCarryList();
		}
	}
</script>

<style scoped>
/* 	.step {
		border-bottom: 1px solid #d7d9da;
		box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3);
	} */

	.tabs {
		/* 		border-top: 2px solid #dbdbdb; */
		/* 		box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.2);
		border-radius: 5px;	 */
	}

    .u-form{
    	border: 1px solid #bdbdbd;
    /* 	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); */
    	border-radius: 15px;
    }
	.slot-icon {
		width: 21px;
		height: 21px;
		background-color: #f9ae3d;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 21px;
		text-align: center;
	}

	.form {
	/* 	margin-top: 10rpx; */
		background-color: #fff;
		border-left: 1px solid #bcbcbd;
		/* border-top: 2px solid #f0f0f1; */
		border-right: 1px solid #bcbcbd;
		border-bottom: 1px solid #bcbcbd;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
		/* 	border-radius: 15px; */
	}

	::v-deep .u-form-item__body {
		padding: 0rpx 0rpx !important;
	}

	::v-deep .u-form-item {
		padding: 0px 40rpx !important;
	}
    .viewData{
		background-color: white; 
		padding: 0rpx 5rpx 10rpx 5rpx;
	}
	/* 	.uni-input-input{
		color: red;
	} */
	.swiper1 {
		height: 1350rpx;
	}

	.swiper2 {
		height: 1250rpx;
	}

	.swiper3 {
		height: 1250rpx;
	}

	.swiper4 {
		height: 1100rpx;
	}

	.u-empty {
		height: 1200rpx;
	}

	::v-deep #app {
		background-color: #f5f5f5 !important;
	}

	.workbench-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		padding: 10px 30rpx;
		margin-bottom: 10px;
	}

	.item-th {
		background-color: #d7d7d8;
	}

	.apply-form-field {
		background: #ffffff;

		.input-placeholder {
			text-align: left !important;
			font-size: 28rpx;
		}

		.uni-input-input {
			text-align: left !important;
		}

		.form-field-select {
			.u-iconfont {
				font-size: 0 !important;
			}
		}

		.add-user {
			color: #bfbfbf;
			font-size: 30px;
		}

		.apply-name {
			color: #333333;
			line-height: 20px;

			span {
				color: #999999;
				display: block;

			}
		}

		.apply-link {
			.u-link {
				color: #5ab149 !important;
				padding: 0 5px;
			}
		}

		.u-close--top-right {
			top: 5px !important;
		}

		.popup-title {
			color: #333333;
			padding: 5px 10px;
			font-size: 30rpx;
		}

		.u-cell {
			padding: 8px 12px !important;
		}

	}
</style>